<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: #ce5555 !important;
        }
        #green{
            color: green;
        }
        .blue{
            color: blue;
        }
        /* css选择器优先级顺序：
        !important>行内样式>id选择器>class》标签名选择器 */

        div{
            color: #650505;
        }
        div{
            color: #351375;
        }

        /* 多个选择器连写时，优先级是这些选择器优先级权值之和
        标签选择器：1
        class选择器：10
        id选择器：100
        行内样式：1000
        ！important：10000 */

        /* 1+100=101 */
        h1#t1{
            color: #750303;
        }
        /* 1+10=11 */
        h1.title{
            color: #2f2ac7;
        }
        /* 100 */
        #t1{
            color: #30af85;
        }
        /* 1或100 */
        h1,#t1{
            color: #f4bfbf;
        }
    </style>
</head>
<body>
    <p id="green" class="blue" style="color: aquamarine;">最后显示什么颜色</p>
    <div>如果多个优先级选择器一样，那么按照书写顺序取最后一个选择器样式</div>
    <h1 id="t1" class="title">多个选择器连写</h1>
</body>
</html>